<template>
  <div v-if=" etype == 'multipleSelect' || data.show_type == 'select'"  class="field inline" :class="{disabled: data.readonly}">
    <label :class="{must: data.is_must}">{{data.label}}</label>
    <select class="ui dropdown" multiple="" :class="{disabled: data.readonly}" :id="s_id" v-model="params.value">
      <option value=""> 请选择{{data.label}}</option>
      <option :value="item.value"  v-for="item in elements"> {{item.name}}</option>
    </select>
  </div>
  <div v-else class="inline fields" :class="{disabled: data.readonly}">
    <label :class="{must: data.is_must}">{{data.label}}</label>
    <div class="field" v-if="elements.length == 0">无数据</div>
    <div class="field" v-for="item in elements" v-else>
      <div class="ui checkbox">
        <input type="checkbox" :name="item.name" :value="item.value" v-model="params.value">
        <label>{{item.name}}</label>
      </div>
    </div>
  </div>
</template>

<script>
  import tool from 'src/util/tool';
  import util from '_util/index';
  import logic from '_logic';



  export default {
    data() {
      return {
        etype: "",
        s_id: "",
        params:{
          name:"",
          value:[],
          show:{},
        },
        selected:[],
        elements:[],
      }
    },
    methods: {
      setSelect(doClear){
        if(doClear){
          $("#"+this.s_id).dropdown("clear");
          return;
        }
        $('.ui.dropdown')
        .dropdown({
          allowAdditions: true,
          // useLabels: false,
        });
      },
      setElemet(){
        let doClear = false,
            _this = this;

        this.elements =  this.element_format( this.data.element ).map(function(item){
          if( typeof(item) != "object" ){
            return {value:item, name: item}
          };
          return item;
        }) || [];
        this.params.value.forEach((val) => {
          if(!doClear){
            let isExsit = false;
            _this.elements.forEach((item) => {
              if(!isExsit){
                isExsit = val == item.value;
              }
            });
            doClear = !isExsit
          }
        });
        this.setSelect(doClear);
      },
      element_format(element, isArray){
        /*json字符串, code字符串, array  {name, value}*/
        if(!element){return []}
        let res = null; 
        if( typeof( element ) != "object" ){
           element  =  element.replace(/\s/g, "");
          if(/^\[.*\]$/.test( element ) || /^\{.*\}$/.test( element )){
            res = JSON.parse(  element  );
          }else if(/^(.*\,)+.*$/.test( element )){
            res =  element.split(",");
          }else if(/^(.*\|)+.*$/.test( element )){
            res =  element.split("|"); ;
          } else {
            res = [element];
          }
        }else{
          if(Array.isArray(element)){
            res = element;
          }
        }
        if(!Array.isArray(res)){
          res = [res];
        }
        if(isArray){
          return res;
        }
        return res.map((item)=>{
          if(typeof(item) == "object"){
            return item;
          }
          return {name: item, value: item};
        });
      },
    },
    watch: {
      data:{
        immediate: true,
        handler(val) {
          
        }
      },

      "params.value": function(val, old){
        let _this = this;
        if(val== old || !this.data || this.data.readonly){
          return;
        };
        this.params.show = {};
        this.elements.forEach(({value, name}) => {
          if(~val.indexOf( value )){
            _this.params.show[ value ] = {value: value, text: name}
          };
        });
        this.$emit("onchange", _this.params);
      },
      "data.element": function(val, old){
        this.setElemet();
      },

    },
    props:{
      data:{
        type:Object,
        default(){
          return {}
        }
      },
      value:{},
      type:{},
    },
    components: {
    },
    created() {
      this.selected = this.data.value || [];
      this.etype = this.type || this.data.show_type;
      this.setElemet();
      this.params.name = this.data.name;
      this.params.value = this.element_format(this.data.value, true);
      this.params.raw = this.data;
      this.s_id = this.data.name+"_"+Math.ceil( Math.random()*10000 );
      this.$nextTick(() => {
        this.setSelect();
      });
    }
  };
</script>

<style lang="less" scoped>
</style>